<template>
	<div class="admin-home">
		<div>
			<div>
				<img src="../../assets/img/home-1.png">
				<label>{{ deviceCount }}</label>
				<label>{{ $t('route.device_number') }}</label>
				<el-button @click='jumpPage(0)' :plain="true">{{ $t('route.DeviceManager') }}</el-button>
			</div>
			<div>
				<img src="../../assets/img/home-2.png">
				<label>{{ customerCount }}</label>
				<label>{{ $t('route.brOadness_Of_markets') }}</label>
				<el-button @click='jumpPage(1)' :plain="true">{{ $t('route.Customer_Management') }}</el-button>
			</div>
			<div>
				<img src="../../assets/img/home-3.png">
				<label>{{ agentCount }}</label>
				<label>{{ $t('route.Number_of_agents') }}</label>
				<el-button @click='jumpPage(2)' :plain="true">{{ $t('route.Agent_management') }}</el-button>
			</div>

			<div>
				<img src="../../assets/img/home-4.png">
				<label>{{ repairCount }}</label>
				<label>{{ $t('route.Same_day_repair') }}</label>
				<el-button @click='jumpPage(3)' :plain="true">{{ $t('route.Maintenance_and_Repair') }}</el-button>
			</div>

			<div>
				<img src="../../assets/img/home-5.png">
				<label>{{ (useRate * 100).toFixed(2) }}%</label>
				<label>{{ $t('route.Utilization_rate') }}</label>
				<el-button @click='jumpPage(4)' :plain="true">{{ $t('route.board') }}</el-button>
			</div>
		</div>
		<div>
			<div v-if="chartShow" id="echart-1" style="height: 250px;width: 100%;"></div>
		</div>

		<div>
			<div v-if="chartShow" id="map" style="width: 100%;height:800px;"></div>
		</div>

	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import * as echarts from 'echarts';
import AMapLoader from '@amap/amap-jsapi-loader';
import GPS from '../../js/common/gps-to-gd.js'
export default {
	data() {
		return {
			deviceCount: 0,
			customerCount: 0,
			agentCount: 0,
			repairCount: 0,
			chartShow: false,
			useRate: 0,
			map: null
		};
	},
	methods: {
		jumpPage(type) {
			if (type == 0) {
				this.$router.push('/device-list')
			} else if (type == 1) {
				this.$router.push('/electric-monitor')
			} else if (type == 2) {
				this.$router.push('/repair-order')

			} else if (type == 3) {
				this.$router.push('/user-list')

			} else if (type == 4) {
				this.$router.push('/workshop-map')

			}
		},
		getDeviceCount() {
			http.post(api.GET_DEVICE_COUNT, {
				adminId: this.$store.state.user.id
			}, data => {
				this.deviceCount = data.data;
			})

		},
		getTodayRepairCount() {
			http.post(api.GET_TODAY_REPAIR_COUNT, {
				adminId: this.$store.state.user.id
			}, data => {
				this.repairCount = data.data;
			})

		},
		getCustomerCount() {
			http.post(api.GET_CUSTOMER_COUNT, {
				adminId: this.$store.state.user.id
			}, data => {
				this.customerCount = data.data;
			})

		},
		getAgentCount() {
			http.post(api.GET_AGENT_COUNT, {
				adminId: this.$store.state.user.id
			}, data => {
				this.agentCount = data.data;
			})

		},

		getAllKindDeviceCount() {
			http.post(api.GET_ALL_KIND_DEVICE_COUNT, {
				adminId: this.$store.state.user.id
			}, data => {
				var xData = [];
				var yData = [];
				for (var item of data.data) {
					xData.push(item.kind);
					yData.push(item.count);
				}
				this.initEchart1(xData, yData);
			})

		},
		initEchart1(xData, yData) {
			var myChart = echarts.init(document.getElementById("echart-1"));
			var option = CommonUtils.initBarOption(this.$t('route.Proportion_of_various_equipment'), xData, yData);
			myChart.setOption(option);

		},
		initMarker(markerList) {
			setTimeout(() => {
				//添加聚合组件
				this.map.plugin(["AMap.MarkerClusterer"], () => {
					new AMap.MarkerClusterer(
						this.map,     // 地图实例
						markerList, // 海量点数据，数据中需包含经纬度信息字段 lnglat
					)
				});
				this.map.setZoom(4.5);
			}, 50);

		},
		getDeviceMap() {
			http.post(api.GET_DEVICE_MAP, null, data => {
				var markerList = [];
				for (var item of data.data) {
					if (item.longitude && item.latitude) {
						const latLon = GPS.gcj_encrypt(
							item.latitude,
							item.longitude
						)
						var marker = { weight: 1, lnglat: [latLon.lon, latLon.lat] };
						markerList.push(marker);
					}
				}
				this.initMarker(markerList);
			})
		},

		initLocation() {
			AMap.plugin('AMap.Geolocation', function () {
				var geolocation = new AMap.Geolocation({
					// 是否使用高精度定位，默认：true
					enableHighAccuracy: true,
					// 设置定位超时时间，默认：无穷大
					timeout: 10000,
					// 定位按钮的停靠位置的偏移量
					offset: [10, 20],
					//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					zoomToAccuracy: true,
					//  定位按钮的排放位置,  RB表示右下
					position: 'RB'
				})

				geolocation.getCurrentPosition(function (status, result) {
					if (status == 'complete') {
						onComplete(result)
					} else {
						onError(result)
					}
				});

				function onComplete(data) {
					// data是具体的定位信息
					console.log(JSON.stringify(data));
				}

				function onError(data) {
					console.log(JSON.stringify(data));
					// 定位出错
				}
			})
		},
		initMap() {
			AMapLoader.load({
				key: "920a98d464a61467d4e062bafd8e7fc9",             // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MarkerClusterer'],
				// 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("map", {  //设置地图容器id
					zoom: 11,           //初始化地图级别
					center: [105.602725, 37.076636], //初始化地图中心点位置
				});
				this.getDeviceMap();
				this.initLocation();
			}).catch(e => {
				console.log(e);
			})
		}

	},
	created() {
		this.chartShow = true;
		this.getDeviceCount();
		this.getCustomerCount();
		this.getAgentCount();
		this.getTodayRepairCount();
		this.getAllKindDeviceCount();
		this.initMap();



	},
	mounted() {
		this.$nextTick(() => {
			var myChart1 = echarts.init(document.getElementById("echart-1"));
			window.addEventListener('resize', () => {
				myChart1.resize();
			})
		})
	},
	destroyed() {
		this.chartShow = false;
	}


};
</script>


<style lang="scss" scoped>
.admin-home {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;

	>div {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;

	}

	>div:nth-of-type(1) {

		>div {
			flex: 1;
			margin: 0px 50px;
			background-color: #ffffff;
			padding: 20px;
			border: 2px solid #EEEEEE;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			align-items: center;

			>img:nth-of-type(1) {
				width: 60px;
				height: 60px;
			}

			>label:nth-of-type(1) {
				margin-top: 5px;
				font-size: 25px;
				color: #000000;
			}

			>label:nth-of-type(2) {
				font-size: 16px;
				color: #333333;
			}

			>button:nth-of-type(1) {
				margin-top: 5px;
				color: #A866FF;
				padding: 2px 20px;
			}

		}
	}
}
</style>
